<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品发布 - 电商管理平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        danger: '#EF4444',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .form-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none transition-all;
            }
            .btn-effect {
                @apply transition-all duration-200 hover:shadow-md transform hover:-translate-y-0.5 active:translate-y-0;
            }
            .card-hover {
                @apply shadow-sm hover:shadow-md transition-shadow duration-300;
            }
            .upload-area {
                @apply border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-primary hover:bg-primary/5 transition-all cursor-pointer;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-dark min-h-screen flex flex-col">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="#" class="flex items-center space-x-2">
                        <i class="fa fa-shopping-bag text-primary text-2xl"></i>
                        <span class="text-xl font-bold">电商管理平台</span>
                    </a>
                    <nav class="hidden md:ml-10 md:flex md:space-x-8">
                        <a href="#" class="text-gray-600 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">商品管理</a>
                        <a href="#" class="text-primary border-b-2 border-primary px-3 py-2 text-sm font-medium">发布商品</a>
                        <a href="#" class="text-gray-600 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">订单管理</a>
                        <a href="#" class="text-gray-600 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">数据分析</a>
                    </nav>
                </div>
                <div class="flex items-center">
                    <button class="p-1 rounded-full text-gray-500 hover:text-primary focus:outline-none focus:ring-2 focus:ring-primary/50 mr-2">
                        <i class="fa fa-search"></i>
                    </button>
                    <button class="p-1 rounded-full text-gray-500 hover:text-primary focus:outline-none focus:ring-2 focus:ring-primary/50 relative mr-2">
                        <i class="fa fa-bell"></i>
                        <span class="absolute top-0 right-0 block h-2.5 w-2.5 rounded-full bg-red-400 ring-2 ring-white"></span>
                    </button>
                    <div class="ml-3 relative">
                        <div>
                            <button class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-primary/50" id="user-menu-button">
                                <img class="h-8 w-8 rounded-full object-cover" src="https://picsum.photos/id/1005/200/200" alt="用户头像">
                            </button>
                        </div>
                    </div>
                    <button type="button" class="md:hidden ml-4 inline-flex items-center justify-center p-2 rounded-md text-gray-500 hover:text-primary hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary" id="mobile-menu-button">
                        <i class="fa fa-bars"></i>
                    </button>
                </div>
            </div>
            
            <!-- 移动端菜单 -->
            <div class="md:hidden hidden" id="mobile-menu">
                <div class="pt-2 pb-3 space-y-1">
                    <a href="#" class="text-gray-600 hover:text-primary block px-3 py-2 rounded-md text-base font-medium">商品管理</a>
                    <a href="#" class="text-primary bg-primary/5 block px-3 py-2 rounded-md text-base font-medium">发布商品</a>
                    <a href="#" class="text-gray-600 hover:text-primary block px-3 py-2 rounded-md text-base font-medium">订单管理</a>
                    <a href="#" class="text-gray-600 hover:text-primary block px-3 py-2 rounded-md text-base font-medium">数据分析</a>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 页面标题与操作 -->
        <section id="page-header" class="mb-8">
            <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">发布新商品</h1>
                    <p class="mt-1 text-sm text-gray-500">填写商品信息并发布，完成后将在商城展示</p>
                </div>
                <div class="flex space-x-3">
                    <button type="button" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary btn-effect">
                        <i class="fa fa-save mr-1"></i> 保存草稿
                    </button>
                    <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary btn-effect">
                        <i class="fa fa-check mr-1"></i> 发布商品
                    </button>
                </div>
            </div>
            
            <!-- 进度条 -->
            <div class="relative">
                <div class="hidden md:flex items-center justify-between mb-2">
                    <span class="text-sm font-medium text-primary">1. 基本信息</span>
                    <span class="text-sm font-medium text-gray-400">2. 规格与库存</span>
                    <span class="text-sm font-medium text-gray-400">3. 图片与描述</span>
                    <span class="text-sm font-medium text-gray-400">4. 完成发布</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2.5">
                    <div class="bg-primary h-2.5 rounded-full" style="width: 25%"></div>
                </div>
                <div class="flex justify-between mt-2 md:hidden">
                    <span class="text-xs text-primary font-medium">步骤 1/4</span>
                    <span class="text-xs text-gray-500">基本信息</span>
                </div>
            </div>
        </section>

        <div class="flex flex-col lg:flex-row gap-8">
            <!-- 左侧表单区域 -->
            <div class="lg:w-2/3 space-y-6">
                <!-- 商品基本信息 -->
                <section id="product-basic-info" class="bg-white rounded-lg shadow-sm p-6 card-hover">
                    <h2 class="text-lg font-semibold mb-4 flex items-center">
                        <i class="fa fa-info-circle text-primary mr-2"></i> 商品基本信息
                    </h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="product-name" class="block text-sm font-medium text-gray-700 mb-1">商品名称 <span class="text-red-500">*</span></label>
                            <input type="text" id="product-name" name="product-name" placeholder="请输入商品名称" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm form-focus">
                            <p class="mt-1 text-xs text-gray-500">请填写清晰易懂的商品名称，有助于搜索和展示</p>
                        </div>
                        <div>
                            <label for="product-sn" class="block text-sm font-medium text-gray-700 mb-1">商品编号</label>
                            <input type="text" id="product-sn" name="product-sn" placeholder="自动生成或手动输入" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm form-focus">
                        </div>
                        <div>
                            <label for="product-category" class="block text-sm font-medium text-gray-700 mb-1">商品分类 <span class="text-red-500">*</span></label>
                            <select id="product-category" name="product-category" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm form-focus appearance-none bg-white">
                                <option value="">请选择分类</option>
                                <option value="clothing">服装鞋帽</option>
                                <option value="electronics">电子产品</option>
                                <option value="home">家居用品</option>
                                <option value="beauty">美妆个护</option>
                                <option value="food">食品饮料</option>
                                <option value="books">图书音像</option>
                                <option value="other">其他分类</option>
                            </select>
                        </div>
                        <div>
                            <label for="product-brand" class="block text-sm font-medium text-gray-700 mb-1">商品品牌</label>
                            <select id="product-brand" name="product-brand" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm form-focus appearance-none bg-white">
                                <option value="">请选择品牌</option>
                                <option value="brand1">品牌一</option>
                                <option value="brand2">品牌二</option>
                                <option value="brand3">品牌三</option>
                                <option value="custom">自定义品牌</option>
                            </select>
                        </div>
                        <div>
                            <label for="product-price" class="block text-sm font-medium text-gray-700 mb-1">销售价 <span class="text-red-500">*</span></label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <span class="text-gray-500">¥</span>
                                </div>
                                <input type="number" id="product-price" name="product-price" placeholder="0.00" min="0" step="0.01" class="w-full pl-7 pr-3 py-2 border border-gray-300 rounded-md shadow-sm form-focus">
                            </div>
                        </div>
                        <div>
                            <label for="product-market-price" class="block text-sm font-medium text-gray-700 mb-1">市场价</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <span class="text-gray-500">¥</span>
                                </div>
                                <input type="number" id="product-market-price" name="product-market-price" placeholder="0.00" min="0" step="0.01" class="w-full pl-7 pr-3 py-2 border border-gray-300 rounded-md shadow-sm form-focus">
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 商品规格与库存 -->
                <section id="product-sku-stock" class="bg-white rounded-lg shadow-sm p-6 card-hover">
                    <h2 class="text-lg font-semibold mb-4 flex items-center">
                        <i class="fa fa-cubes text-primary mr-2"></i> 商品规格与库存
                    </h2>
                    <div class="space-y-6">
                        <div>
                            <label class="flex items-center">
                                <input type="checkbox" id="is-single-sku" name="is-single-sku" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" checked>
                                <span class="ml-2 block text-sm text-gray-700">单规格商品（无颜色/尺寸等属性）</span>
                            </label>
                        </div>
                        
                        <div id="single-sku-content">
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                                <div>
                                    <label for="product-stock" class="block text-sm font-medium text-gray-700 mb-1">库存数量 <span class="text-red-500">*</span></label>
                                    <input type="number" id="product-stock" name="product-stock" placeholder="0" min="0" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm form-focus">
                                </div>
                                <div>
                                    <label for="product-weight" class="block text-sm font-medium text-gray-700 mb-1">商品重量（kg）</label>
                                    <input type="number" id="product-weight" name="product-weight" placeholder="0.00" min="0" step="0.01" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm form-focus">
                                </div>
                                <div>
                                    <label for="product-volume" class="block text-sm font-medium text-gray-700 mb-1">商品体积（m³）</label>
                                    <input type="number" id="product-volume" name="product-volume" placeholder="0.00" min="0" step="0.001" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm form-focus">
                                </div>
                            </div>
                        </div>
                        
                        <div id="multi-sku-content" class="hidden">
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">规格属性</label>
                                    <div class="flex flex-wrap gap-3">
                                        <div class="flex items-center">
                                            <span class="text-sm text-gray-600 mr-2">颜色：</span>
                                            <input type="text" placeholder="红色,蓝色,黑色" class="px-3 py-2 border border-gray-300 rounded-md shadow-sm form-focus">
                                        </div>
                                        <div class="flex items-center">
                                            <span class="text-sm text-gray-600 mr-2">尺寸：</span>
                                            <input type="text" placeholder="S,M,L,XL" class="px-3 py-2 border border-gray-300 rounded-md shadow-sm form-focus">
                                        </div>
                                        <button type="button" class="text-primary flex items-center text-sm">
                                            <i class="fa fa-plus-circle mr-1"></i> 添加规格
                                        </button>
                                    </div>
                                </div>
                                
                                <div class="overflow-x-auto">
                                    <table class="min-w-full divide-y divide-gray-200">
                                        <thead class="bg-gray-50">
                                            <tr>
                                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">规格</th>
                                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">销售价(¥)</th>
                                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">库存</th>
                                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">重量(kg)</th>
                                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                            </tr>
                                        </thead>
                                        <tbody class="bg-white divide-y divide-gray-200">
                                            <tr>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">红色 / S</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><input type="number" min="0" step="0.01" class="w-20 px-2 py-1 border border-gray-300 rounded form-focus"></td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><input type="number" min="0" class="w-16 px-2 py-1 border border-gray-300 rounded form-focus"></td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><input type="number" min="0" step="0.01" class="w-16 px-2 py-1 border border-gray-300 rounded form-focus"></td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                    <button type="button" class="text-danger hover:text-danger/80">
                                                        <i class="fa fa-trash-o"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                
                                <button type="button" class="w-full py-2 border border-dashed border-gray-300 rounded-md text-sm text-gray-500 hover:text-primary hover:border-primary transition-colors">
                                    生成规格组合
                                </button>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 商品图片 -->
                <section id="product-images" class="bg-white rounded-lg shadow-sm p-6 card-hover">
                    <h2 class="text-lg font-semibold mb-4 flex items-center">
                        <i class="fa fa-picture-o text-primary mr-2"></i> 商品图片
                    </h2>
                    <div class="space-y-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-3">主图 <span class="text-red-500">*</span> <span class="text-xs text-gray-500">(第一张为主图，最多5张)</span></label>
                            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
                                <div class="upload-area aspect-square">
                                    <div class="flex flex-col items-center justify-center h-full">
                                        <i class="fa fa-cloud-upload text-3xl text-gray-400 mb-2"></i>
                                        <span class="text-sm text-gray-500">点击上传</span>
                                    </div>
                                </div>
                                <!-- 已上传图片示例 -->
                                <div class="aspect-square rounded-md overflow-hidden relative hidden">
                                    <img src="https://picsum.photos/id/26/400/400" alt="商品图片" class="h-full w-full object-cover">
                                    <button type="button" class="absolute top-1 right-1 bg-black/50 text-white rounded-full p-1 hover:bg-black/70 transition-colors">
                                        <i class="fa fa-times text-xs"></i>
                                    </button>
                                    <span class="absolute bottom-1 left-1 bg-primary text-white text-xs px-1.5 py-0.5 rounded">主图</span>
                                </div>
                            </div>
                            <p class="mt-2 text-xs text-gray-500">支持JPG、PNG格式，建议尺寸800×800像素，大小不超过5MB</p>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-3">详情图</label>
                            <div class="upload-area">
                                <div class="flex flex-col items-center justify-center">
                                    <i class="fa fa-cloud-upload text-3xl text-gray-400 mb-2"></i>
                                    <span class="text-sm text-gray-600 mb-1">点击上传或拖拽图片到此处</span>
                                    <span class="text-xs text-gray-500">最多上传20张，支持JPG、PNG格式</span>
                                </div>
                            </div>
                            <p class="mt-2 text-xs text-gray-500">建议尺寸750×任意，宽度一致的图片展示效果更佳</p>
                        </div>
                    </div>
                </section>

                <!-- 商品详情 -->
                <section id="product-description" class="bg-white rounded-lg shadow-sm p-6 card-hover">
                    <h2 class="text-lg font-semibold mb-4 flex items-center">
                        <i class="fa fa-file-text-o text-primary mr-2"></i> 商品详情
                    </h2>
                    <div class="space-y-6">
                        <div>
                            <label for="product-brief" class="block text-sm font-medium text-gray-700 mb-1">商品简介</label>
                            <textarea id="product-brief" name="product-brief" rows="3" placeholder="简要介绍商品特点、优势等信息" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm form-focus resize-none"></textarea>
                            <p class="mt-1 text-xs text-gray-500">简短描述将展示在商品列表和搜索结果中</p>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-3">详细描述</label>
                            <!-- 富文本编辑器工具栏 -->
                            <div class="border-b border-gray-200 pb-2 mb-3 flex flex-wrap gap-1">
                                <button type="button" class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="加粗">
                                    <i class="fa fa-bold"></i>
                                </button>
                                <button type="button" class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="斜体">
                                    <i class="fa fa-italic"></i>
                                </button>
                                <button type="button" class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="标题">
                                    <i class="fa fa-header"></i>
                                </button>
                                <button type="button" class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="无序列表">
                                    <i class="fa fa-list-ul"></i>
                                </button>
                                <button type="button" class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="有序列表">
                                    <i class="fa fa-list-ol"></i>
                                </button>
                                <span class="h-5 w-px bg-gray-300 mx-0.5"></span>
                                <button type="button" class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="插入链接">
                                    <i class="fa fa-link"></i>
                                </button>
                                <button type="button" class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="插入图片">
                                    <i class="fa fa-image"></i>
                                </button>
                                <button type="button" class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="插入表格">
                                    <i class="fa fa-table"></i>
                                </button>
                                <span class="h-5 w-px bg-gray-300 mx-0.5"></span>
                                <button type="button" class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="清除格式">
                                    <i class="fa fa-eraser"></i>
                                </button>
                            </div>
                            <!-- 富文本编辑区 -->
                            <div class="min-h-[300px] border border-gray-300 rounded-md p-4 form-focus" id="product-detail-editor" contenteditable="true">
                                <p>请在此处填写商品的详细描述信息...</p>
                                <p><br></p>
                                <p>建议包含：</p>
                                <ul>
                                    <li>商品的详细参数和特点</li>
                                    <li>使用方法和注意事项</li>
                                    <li>售后服务和保障</li>
                                    <li>相关的图片和说明</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

            <!-- 右侧设置区域 -->
            <div class="lg:w-1/3 space-y-6">
                <!-- 商品状态与属性 -->
                <section id="product-status-attributes" class="bg-white rounded-lg shadow-sm p-6 card-hover">
                    <h2 class="text-lg font-semibold mb-4 flex items-center">
                        <i class="fa fa-cog text-primary mr-2"></i> 商品状态与属性
                    </h2>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">商品状态</label>
                            <select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm form-focus">
                                <option value="pending">待上架</option>
                                <option value="online">立即上架</option>
                                <option value="offline">下架（仅自己可见）</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">上架时间</label>
                            <input type="datetime-local" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm form-focus">
                            <p class="mt-1 text-xs text-gray-500">不设置则立即上架</p>
                        </div>
                        
                        <div>
                            <label class="flex items-center">
                                <input type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                <span class="ml-2 block text-sm text-gray-700">支持退换货</span>
                            </label>
                        </div>
                        
                        <div>
                            <label class="flex items-center">
                                <input type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                <span class="ml-2 block text-sm text-gray-700">支持会员折扣</span>
                            </label>
                        </div>
                        
                        <div>
                            <label class="flex items-center">
                                <input type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                <span class="ml-2 block text-sm text-gray-700">参与促销活动</span>
                            </label>
                        </div>
                    </div>
                </section>

                <!-- 商品标签 -->
                <section id="product-tags" class="bg-white rounded-lg shadow-sm p-6 card-hover">
                    <h2 class="text-lg font-semibold mb-4 flex items-center">
                        <i class="fa fa-tags text-primary mr-2"></i> 商品标签
                    </h2>
                    <div class="flex flex-wrap gap-2 mb-4" id="tags-container">
                        <!-- 动态添加的标签将显示在这里 -->
                    </div>
                    <div class="flex">
                        <input type="text" id="tag-input" placeholder="输入标签，按回车添加（最多8个）" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md shadow-sm form-focus">
                        <button type="button" id="add-tag" class="px-3 py-2 bg-primary text-white rounded-r-md hover:bg-primary/90 transition-colors">
                            添加
                        </button>
                    </div>
                    <p class="mt-2 text-xs text-gray-500">标签有助于商品搜索和分类，建议使用精准关键词</p>
                    
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <p class="text-xs text-gray-600 mb-2">热门标签：</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded cursor-pointer hover:bg-primary/10 hover:text-primary transition-colors">新品</span>
                            <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded cursor-pointer hover:bg-primary/10 hover:text-primary transition-colors">热卖</span>
                            <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded cursor-pointer hover:bg-primary/10 hover:text-primary transition-colors">优惠</span>
                            <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded cursor-pointer hover:bg-primary/10 hover:text-primary transition-colors">品质保证</span>
                            <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded cursor-pointer hover:bg-primary/10 hover:text-primary transition-colors">限时折扣</span>
                        </div>
                    </div>
                </section>

                <!-- 物流信息 -->
                <section id="shipping-info" class="bg-white rounded-lg shadow-sm p-6 card-hover">
                    <h2 class="text-lg font-semibold mb-4 flex items-center">
                        <i class="fa fa-truck text-primary mr-2"></i> 物流信息
                    </h2>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">运费设置</label>
                            <select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm form-focus">
                                <option value="free">全场包邮</option>
                                <option value="calculated">按重量计算</option>
                                <option value="fixed">固定运费</option>
                                <option value="none">不包邮</option>
                            </select>
                        </div>
                        
                        <div>
                            <label for="shipping-fee" class="block text-sm font-medium text-gray-700 mb-1">基础运费（元）</label>
                            <input type="number" id="shipping-fee" name="shipping-fee" placeholder="0.00" min="0" step="0.01" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm form-focus">
                        </div>
                        
                        <div>
                            <label for="shipping-time" class="block text-sm font-medium text-gray-700 mb-1">发货时间</label>
                            <select id="shipping-time" name="shipping-time" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm form-focus">
                                <option value="24h">24小时内</option>
                                <option value="48h">48小时内</option>
                                <option value="72h">72小时内</option>
                                <option value="week">1周内</option>
                                <option value="custom">自定义</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="flex items-center">
                                <input type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                <span class="ml-2 block text-sm text-gray-700">支持货到付款</span>
                            </label>
                        </div>
                    </div>
                </section>

                <!-- 售后服务 -->
                <section id="after-sales-service" class="bg-white rounded-lg shadow-sm p-6 card-hover">
                    <h2 class="text-lg font-semibold mb-4 flex items-center">
                        <i class="fa fa-headphones text-primary mr-2"></i> 售后服务
                    </h2>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">退换货期限</label>
                            <select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm form-focus">
                                <option value="7d">7天无理由退换</option>
                                <option value="15d">15天无理由退换</option>
                                <option value="30d">30天无理由退换</option>
                                <option value="custom">自定义规则</option>
                            </select>
                        </div>
                        
                        <div>
                            <label for="warranty" class="block text-sm font-medium text-gray-700 mb-1">质保期限</label>
                            <select id="warranty" name="warranty" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm form-focus">
                                <option value="none">无质保</option>
                                <option value="30d">30天</option>
                                <option value="90d">90天</option>
                                <option value="1y">1年</option>
                                <option value="2y">2年</option>
                                <option value="custom">自定义</option>
                            </select>
                        </div>
                        
                        <div>
                            <label for="after-sales-desc" class="block text-sm font-medium text-gray-700 mb-1">售后说明</label>
                            <textarea id="after-sales-desc" name="after-sales-desc" rows="3" placeholder="请填写售后服务政策和说明" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm form-focus resize-none"></textarea>
                        </div>
                    </div>
                </section>
            </div>
        </div>

        <!-- 底部操作按钮 -->
        <section id="action-buttons" class="mt-8 bg-white rounded-lg shadow-sm p-6 card-hover">
            <div class="flex flex-wrap justify-between items-center gap-4">
                <button type="button" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary btn-effect">
                    <i class="fa fa-arrow-left mr-1"></i> 返回列表
                </button>
                
                <div class="flex space-x-3">
                    <button type="button" class="inline-flex items-center px-6 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary btn-effect">
                        <i class="fa fa-save mr-1"></i> 保存草稿
                    </button>
                    <button type="button" class="inline-flex items-center px-6 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary btn-effect">
                        <i class="fa fa-check mr-1"></i> 发布商品
                    </button>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 mt-12 py-8">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <p class="text-sm text-gray-500">© 2023 电商管理平台 版权所有</p>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-sm text-gray-500 hover:text-primary transition-colors">帮助中心</a>
                    <a href="#" class="text-sm text-gray-500 hover:text-primary transition-colors">发布规则</a>
                    <a href="#" class="text-sm text-gray-500 hover:text-primary transition-colors">联系我们</a>
                    <a href="#" class="text-sm text-gray-500 hover:text-primary transition-colors">隐私政策</a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 移动端菜单切换
        document.getElementById('mobile-menu-button').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });

        // 单规格/多规格切换
        const isSingleSku = document.getElementById('is-single-sku');
        const singleSkuContent = document.getElementById('single-sku-content');
        const multiSkuContent = document.getElementById('multi-sku-content');
        
        isSingleSku.addEventListener('change', function() {
            if (this.checked) {
                singleSkuContent.classList.remove('hidden');
                multiSkuContent.classList.add('hidden');
            } else {
                singleSkuContent.classList.add('hidden');
                multiSkuContent.classList.remove('hidden');
            }
        });

        // 标签添加功能
        const tagInput = document.getElementById('tag-input');
        const addTagBtn = document.getElementById('add-tag');
        const tagsContainer = document.getElementById('tags-container');
        const MAX_TAGS = 8;

        function addTag(tagText) {
            // 验证标签
            if (!tagText.trim() || tagsContainer.children.length >= MAX_TAGS) return;
            
            // 检查是否已存在相同标签
            const existingTags = Array.from(tagsContainer.getElementsByClassName('tag-item'));
            if (existingTags.some(tag => tag.firstChild.textContent.trim() === tagText.trim())) {
                return;
            }
            
            // 创建标签元素
            const tag = document.createElement('div');
            tag.className = 'tag-item bg-primary/10 text-primary px-3 py-1 rounded-full text-sm flex items-center gap-1';
            tag.innerHTML = `
                ${tagText.trim()}
                <button class="remove-tag text-primary/70 hover:text-primary">
                    <i class="fa fa-times-circle"></i>
                </button>
            `;
            
            // 添加删除事件
            tag.querySelector('.remove-tag').addEventListener('click', function() {
                tag.remove();
            });
            
            tagsContainer.appendChild(tag);
            tagInput.value = '';
        }

        // 点击添加标签
        addTagBtn.addEventListener('click', function() {
            addTag(tagInput.value);
        });

        // 回车添加标签
        tagInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                addTag(this.value);
            }
        });

        // 热门标签点击添加
        document.querySelectorAll('#product-tags .text-xs.bg-gray-100').forEach(tag => {
            tag.addEventListener('click', function() {
                addTag(this.textContent);
            });
        });
    </script>
</body>
</html>
